﻿<%@ include file="/common/taglibs.jsp"%>
<!--分页查询共用的页面-->
<%@ include file="/common/common.jsp"%>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<link rel="stylesheet" type="text/css" href="<%=ApplicationPath%>/video/timelineInfo.css">
	<title></title>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
	<script type="text/javascript" src="<%=ApplicationPath%>/video/ckplayer/ckplayer/ckplayer.js?v=82" charset="UTF-8"></script>
	<script type="text/javascript" src="<%=ApplicationPath%>/video/ckplayer/MyCkPlayer.js?v=62" charset="UTF-8"></script>

	<script type="text/javascript" src="<%=jsPath%>/videoHisRoute.js?v=70"></script>
	<script type="text/javascript" src="<%=jsPath%>/videoPlayer.js?v=11"></script>
	<script type="text/javascript" src="<%=jsPath%>/videoStatus.js?v=11"></script>

	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.timers.js"></script><!--定时器-->
	<script type="text/javascript" src="<%=jsPath%>/terminalCommand.js?v=11"></script>
	<script src="<%=jsPath%>/jquery/jquery.form.js" type="text/javascript"></script>
	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.validate.js"></script><!--表单数据验证-->
	<script type="text/javascript" src="<%=jsPath%>/jquery/jquery.metadata.js"  charset="UTF-8"></script><!--表单数据验证-->
	<style>
		.queryConditionTable td
		{
			padding:3px;
		}
	</style>

	<script>
        var vs = null;
        var simNo = "013200000003";
        var stream = 0;
        var vehicleId = 0;
        var plateNo = null;

        var hlsUrl = null;


        window.onbeforeunload = function (e) {
            //return (e || window.event).returnValue = '有信息未保存，确认离开？！';
        }
        window.onunload = function (e) {
            //return (e || window.event).returnValue = '有信息未保存，确认离开？！';
        }


        function doSelectVehicle()
        {
            InfoWindow.selectVehicle();
        }
        /**
         * 当选择车辆的窗口选择后，触发回调
         */
        function onVehicleSelected(_vehicleId,plateNo,simNo)
        {
            $("#vehicleId").val(_vehicleId);
            vehicleId = _vehicleId;
            $("#plateNo").val(plateNo);
            while(simNo.length < 12)
			{
			    simNo = "0"+ simNo;
			}
            $("#simNo").val(simNo);
        }



        /**
         * 当easyui的dialog 被关闭的时候，会自动调用此方法，停止监听
         * @returns {boolean}
         */
        function onWindowBeforeClose()
        {
            $("#btnPausePlayBack").click();
            return true;
        }


        function renderTemplate(record)
        {
            return window.parent.renderTemplate(record);
        }


        function sendRealVideoRequest(vehicleId, simNo, channel)
        {
            var me = this;
            var params = {vehicleId:vehicleId,simNo : simNo, channel:channel, stream:1};
            var url = "<%=ApplicationPath%>/videoCommand/realTimeVideo.action";
            $.getJSON(url, params,
                function(result){
                    if (result.success) {
                        var commandId = result.data; //下发成功后，获取到命令Id
                        startQueryResult(commandId);
                    }else
                    {
                        setVideoChannelStatus("请求错误:" + result.message);
                    }

                });
        }

        function setVideoChannelStatus(message)
		{
		    $("#playMessage").html(message);
        }


        var times = 60;//获取查询结果的最大次数
		var timerName = "videoCommandTimer";
        function startQueryResult(commandId,url, onSuccess)
        {
            if(!url)
                url =  "<%=ApplicationPath%>/command/getCommandResult.action"; //查询命令的执行情况
            url = url;
            var me = this;
            setVideoChannelStatus("正在请求");
            //使用jquery.timer插件，进行定时调用，最多执行次数取决this.times的次数定义
            $('body').oneTime('500ms', timerName,function(){
                queryResult(commandId,url); //查询命令的返回结果
            });
        }
        //停止查询和倒计时
        function stopQuery ()
        {
            $('body').stopTime (timerName);

            var simNo = $("#simNo").val();
            var channel = $("#channel").val();
            var url =  "<%=ApplicationPath%>/videoCommand/stopRealTimeVideo.action";
            var param = {simNo:simNo, channelId:channel, streamType:1};
            $.getJSON(url, param, function(result)
            {
                setVideoChannelStatus("停止实时播放请求:" + (result.success ? "成功" : "失败"));
            });

        }

        //查询命令执行结果
        function queryResult(commandId,url) {
            times--;
            var params = {commandId: commandId};
            $.getJSON(url, params,
                function (result) {
                    if (result.success == true) {
                        setVideoChannelStatus("");
                        if (result.message != null)
                            setVideoChannelStatus(result.message);
                        if (onCommandSuccess) {
                            onCommandSuccess(result);
                        }
                    } else {
                        setVideoChannelStatus(result.message);
                        if (times == 1) {
                            setVideoChannelStatus("命令执行超时，无应答,请重新操作");
                            $('body').stopTime();
                        } else if (result.message == "等待发送" && times <= 1) {
                            setVideoChannelStatus("服务器没有下发");
                            $('body').stopTime();
                        }
                        else {
                            //最多执行5次
                            $('body').oneTime('500ms', timerName, function () {
                                queryResult(commandId, url); //查询命令的返回结果
                            });
                        }

                    }
                }
            )
        }


        function onCommandSuccess(result)
        {
            if(result.success)
            {
                $("#btnStopPlayBack").linkbutton('enable');
                $("#btnPausePlayBack").linkbutton('enable');

                var player = players[0];
                player.changeVideo(hlsUrl);
            }
        }



        function isButtonDisabled(btnId)
        {
            var opts = $("#"+btnId).linkbutton("options");
            return   true == opts.disabled;
        }

        function onPanelResize(width, height)
        {
        }

        //初始化地图
        function initMap()
        {
            var mapUrl = window.parent.globalConfig.mapPath;
            if(mapUrl == null)
                return;
            if(mapUrl.indexOf('?') < 0)
                mapUrl += '?hisRoute=true';
            else
                mapUrl += '&hisRoute=true';
            $("#routeMapFrame").attr("src", mapUrl);

        }

        var playerTime = [0,0,0,0];


        var currentCKPlayer = null;

        function myPause()
        {
            if(currentCKPlayer != null)
                currentCKPlayer.getCkPlayer().videoPause();
        }
        //进入全屏
        function requestFullScreen(element) {
            var de = document.querySelector(element) || document.documentElement;
            if (de.requestFullscreen) {
                de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
                de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
                de.webkitRequestFullScreen();
            }
        }


        var players = [];
        $(document).ready(function () {
            initMap();
            for(var m = 0; m < 4; m++)
            {
                var index = m+1;
                var myCkPlayer = new MyCkPlayer("video_" + index, "", "");
                players.push(myCkPlayer);
            }

            $("#btnPausePlayBack").click(function()
            {
                $.each(players, function(i,p)
                {
                    p.getCkPlayer().videoPause();
                })
                stopQuery();
            });

            $("#btnPlayBack").click(function()
            {
                if(vehicleId ==  0)
				{
				    $.messager.alert("提示", "请选择要播放的车辆");
				    return;
				}

                $('body').stopTime (timerName);

                var simNo = $("#simNo").val();
                var channel = $("#channel").val();
                hlsUrl = "http://127.0.0.1:8080/hls/" + simNo + "_" + channel + ".m3u8";
                sendRealVideoRequest(vehicleId, simNo, channel);

            });

            $("#btnFullScreen").click(function()
            {
                requestFullScreen("#videoPanelCenter");
            })


        });



	</script>

</head>

<body class="easyui-layout">
<div id="videoToolbar" data-options="region:'north',border:'false'" style="height:45px;padding-top:5px;">
	<form id="queryForm" action='<%=ApplicationPath%>/videoPlayBack/sendRequest.action'  method="post" style="margin-bottom: 2px;">
		<input type="hidden"  name="vehicleId"  id="vehicleId" value="0"/>
		<input type="hidden"  name="simNo"  id="simNo" value=""/>
		<input type="hidden"  name="playBackPos"  id="playBackPos" value="0"/>
		<table cellpadding="5" class="queryConditionTable">

			<tr>
				<td> 车牌号码 </td>
				<td width="150">
					<input type="text" name="plateNo" id="plateNo"  value="" style="width:90px"  onclick="doSelectVehicle();" readonly/>
					<a id="btnSelectVehicle" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSelectVehicle();"></a>
				</td>
				<td>通道号:</td>
				<td>
					<select name="channel" id="channel">
						<option value="1" selected>通道１</option>
						<option value="2">通道２</option>
						<option value="3">通道３</option>
						<option value="4">通道４</option>
					</select>
				</td>
				<td >

					<a id="btnPlayBack" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-play',disabled:false" >播放</a>
					<a id="btnPausePlayBack" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:false">停止</a>

					<span id="playMessage" ></span>
					<!--
                    <a id="btnFullScreen" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',disabled:false">全屏</a>
                    -->

					<span class="commandMsg"></span>
				</td>

			</tr>
		</table>
	</form>
</div>

<!--
<div id="hisMap" data-options="region:'east',border:false,split:true" style="display:none;width:100px;">
    <iframe id="routeMapFrame" scrolling="no" frameborder="0"  src="" style="width:100%;height:99%;"></iframe>
</div>
-->


<div id="videoPanelCenter" data-options="region:'center',border:false,onResize:onPanelResize" >

	<div id="video_1" style="width: 342px; height: 280px;float:left;margin-right:1px;margin-bottom:1px;"></div>
	<div id="video_2" style="width: 342px; height: 280px;float:left;margin-bottom:1px;"></div>
	<div style="clear:both"></div>

	<div id="video_3" style="width: 342px; height: 280px;float:left;margin-right:1px;"></div>
	<div id="video_4" style="width: 342px; height: 280px;float:left;"></div>
</div>



</body></html>